<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="../static/css/verify.css">


    <style type="text/css">
        #big {
            background-color: white;
            margin: 0 auto;
            width: 1200px;

        }

        table {
            border-collapse: separate;
            border-spacing: 20px;
        {#background-color: #dddddd;#}

        }

        #form {
            background-color: white;
            width: 600px;
            margin-left: 355px;
            margin-right: 375px;
            margin-top: 30px;
        }

        #register {
            width: 250px;
            height: 40px;
            background-color: crimson;
            font-size: larger;
            color: white;
            margin-top: 15px;
            margin-left: 110px;
        }

        /*button是滑块验证码的按钮*/
        button {
            width: 250px;
            height: 40px;
            background-color: #e0dcff;
            font-size: larger;
            color: white;
            margin-top: 0;
            margin-left: 110px;
        }

        span {
            color: green;
            font-size: small;
        }

        /*浮窗*/
        #choiceWindow {
            display: none;
            position: absolute;
            top: 25%;
            left: 35%;
            width: 30%;
            height: 35%;
            padding: 20px;
            border: 3px solid #ccc;
            background-color: white;
            z-index: 3;
            overflow: auto;
        }

        #backGround {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1100px;
            background-color: black;
            z-index: 1;
            -moz-opacity: 0.8;
            opacity: 0.5; /*设置背景透明度*/
            filter: alpha(opacity=100);
        }

        #x:hover {
            cursor: pointer;
            color: rgb(55, 198, 192);
        }
    </style>

    <script type="text/javascript">
        function checkForm() {
            var passtip = checkPassword();
            var conpasstip = ConfirmPassword();
            var phonetip = checkPhone();
            return passtip && conpasstip && phonetip;
        }

        function checkPhone() {
            var userphone = document.getElementById('userPhone');
            var phonrErr = document.getElementById('phoneErr');
            var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式
            if (!pattern.test(userphone.value)) {
                phonrErr.innerHTML = "手机号码不合规范".fontcolor('red')
                phonrErr.className = "error"
                return false;
            }
            else {
                phonrErr.innerHTML = "手机号有效".fontcolor('red')
                phonrErr.className = "success";
                return true;
            }
        }

        function checkPassword() {
            var userpasswd = document.getElementById('userPasword');
            var errPasswd = document.getElementById('passwordErr');
            var pattern = /^\w{6,12}$/; //密码要在6-12位
            if (!pattern.test(userpasswd.value)) {
                errPasswd.innerHTML = "密码不合规范".fontcolor('red')
                errPasswd.className = "error"
                return false;
            }
            else {
                errPasswd.innerHTML = "密码有效".fontcolor('red')
                errPasswd.className = "success";
                return true;
            }
        }

        //确认密码
        function ConfirmPassword() {
            var userpasswd = document.getElementById('userPasword');
            var userConPassword = document.getElementById('userConfirmPasword');
            var errConPasswd = document.getElementById('conPasswordErr');
            if ((userpasswd.value) != (userConPassword.value) || userConPassword.value.length == 0) {
                errConPasswd.innerHTML = "两次密码不同".fontcolor('red')
                errConPasswd.className = "error"
                return false;
            }
            else {
                errConPasswd.innerHTML = "密码正确".fontcolor('red')
                errConPasswd.className = "success";
                return true;
            }
        }


    </script>
</head>
<body>

<div id="big">

    <div>
        <h1 style="font-size: 30px">酷阅小说网|<span style="font-size: 20px">用户注册</span></h1>
    </div>
    <div>
        <h2 align="center" style="margin-top: 50px">注册信息</h2>
    </div>
    <div id="form">
        <form action="#" onsubmit="return checkForm()">
            <table>
                <tr>
                    <td><label for="userPhone">手机号码</label></td>
                    <td><input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()"
                               style="width: 250px;height: 30px;font-size:1em"></td>
                    <td><span class="default" id="phoneErr">请输入11位手机号码</span></td>
                </tr>
                <tr>
                    <td>短信验证</td>
                    <td><input type="text" id="message" name="message" style="width: 250px;height: 30px;font-size:1em">
                    </td>
                    <td><p style="height: 30px;color: #337AB7;text-align: center">点击获取验证码</p></td>
                </tr>
                <tr>
                    <td><label for="userPasword">密码</label></td>
                    <td><input type="password" id="userPasword" class="userName" onBlur="checkPassword()"
                               oninput="checkPassword()" style="width: 250px;height: 30px;font-size:1em"></td>
                    <td><span class="default" id="passwordErr">请输入6-12位密码</span></td>
                </tr>
                <tr>
                    <td><label for="userConfirmPasword">确认密码</label></td>
                    <td><input type="password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()"
                               oninput="ConfirmPassword()" style="width: 250px;height: 30px;font-size:1em"></td>
                    <td><span class="default" id="conPasswordErr">再输入确认密码</span></td>
                </tr>
            </table>

            <div>
                <button id="btn">点击验证</button>
                <div id="choiceWindow">
                    <label id="x" style="position: absolute;top:2px;left: 95%;font-size: 25px;">x</label>
                    <div id="mpanel4" style="margin-top:10px;"></div>
                </div>
                <div id="backGround"></div>
            </div>

            <div>
                <input type="checkbox" style="margin-left: 110px;margin-top: 20px"><label>我已阅读并同意</label><a href=""
                                                                                                            style="text-decoration: none">《用户服务手册》</a>
            </div>
            <div>
                <input type="submit" name="divBtn" id="register" value="注册">
            </div>
        </form>
    </div>

</div>

<script type="text/javascript" src="../static/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/verify.js"></script>
<script type="text/javascript">
    //悬浮窗
    $(document).ready(function () {
        $("#btn").click(function () {
            $("#choiceWindow").slideDown(300);
            $("#backGround").show();

        });

        $("#x").click(function () {
            $("#choiceWindow").slideUp(300);
            $("#backGround").hide();
        })

    });


    $('#mpanel4').slideVerify({
        type: 2,		//类型
        vOffset: 3,	//误差量，根据需求自行调整
        vSpace: 5,	//间隔
        imgName: ['../../static/image/1_hui.jpg', '../../static/image/2_hui.jpg'],
        imgSize: {
            width: '400px',
            height: '200px',
        },
        blockSize: {
            width: '40px',
            height: '40px',
        },
        barSize: {
            width: '400px',
            height: '40px',
        },
        ready: function () {
        },
        success: function () {
            alert('验证成功！');
            //......后续操作
        },
        error: function () {
//		        	alert('验证失败！');
        }

    });

</script>

</body>
</html>